<template>
    <h3>他人笔记</h3>
    <div class="query">  
       <el-input placeholder="请输入笔记标题" v-model="queryStr" class="input-with-button" clearable></el-input>  
       <el-button size="medium" round @click="queryInfo">查询</el-button>  
     </div>  
    <div class="border">  
      <el-tabs v-model="activeName" style="width: 77%">  
        <el-tab-pane label="已发布" name="first" @click="handleApprove">  
          <div v-if="activeName === 'first'" class="note-list">  
            <p>共{{ publishedNoteCount }}条</p>  
            <div class="note-grid">  
              <div class="note-card" v-for="note in tableData" :key="note.id">  
                <div class="note-image">  
                  <el-image :src="'http://localhost:8080/images/upload/' + note.image" style="width: 100%; height: 150px;cursor: pointer;" @click="opennotedetail(note)"></el-image>  
                </div>  
                <div class="note-content">  
                  <h4>{{ note.title }}</h4>  
                  <div class="note-statistics">  
                    <span>浏览量: {{ note.view_count }}</span>&nbsp; 
                    <span>点赞量: {{ note.like_count }}</span>&nbsp;
                    <span>回复量: {{ note.comment_count }}</span>  
                  </div>  
                </div>  
                <div class="note-timestamp">  
                  <span>发布时间: {{ formatDate(note.create_time) }}</span>  
                </div>  
              </div>  
            </div>  
          </div>  
        </el-tab-pane> 
      </el-tabs>
    </div> 
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
data() {
    return {
     queryStr:"",  //data定义组件的初始状态
     activeName: 'first',
     tableData: [], // 存储已发布的笔记数据，从后端api获取
     queryData: [],  //queryData 用于存储所有从后端获取的数据，通常是在组件加载时获取的完整数据集
     publishedNoteCount: 0, // 初始化已发布笔记的数量
     userId: '' ,
     imageUrl:" "   , //图片URL地址
     }
},
methods: {  
     // 格式化日期和时间
  formatDate(dateString) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以加1
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0'); // 获取小时并确保两位数
    const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟并确保两位数
    // 格式化为 YYYY年MM月DD日 HH:MM
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  },

  //使用标签页，第一个标签获取所有已发布的笔记
  handleApprove() {  
      console.log('加载所有已发布的笔记'); // 打印调试信息  
      this.getAllPublishedNotes(); // 获取所有已发布的笔记  
    }, 

    //获取已发布笔记的总数量
    fetchPublishedNoteCount() {
    axios.get(`/v1/NoteCreate/count`, {
      params: { note_status: "审核通过", user_id: this.userId }  /* 传参过滤数据 */
    }).then(response => {
      this.publishedNoteCount = response.data; // 返回的是已发布笔记总数
      this.fetchPublishedNoteCount();  //重新获取，实时更新数量
    });
  },

    //获取所有已发布笔记的相关信息
    getAllPublishedNotes() {
      this.$http.get("/v1/NoteCreateinfo1", {
      params: {  note_status: `审核通过`, user_id: this.userId } // 添加过滤参数
    }).then((response) => {
      this.tableData = response.data.list; // response.data：通过请求相应的数据，后端是list形式，所有获取list数组，过滤审核通过的笔记
      this.queryData = this.tableData; // 更新 queryData，使其包含当前页的数据列表。
      console.log(this.tableData);
    }); 
  }, 
  //进入笔记详情页面
   opennotedetail(note){
    sessionStorage.setItem('note_create_id', note.note_create_id);
    this.navigateTo('/note-detail', note);
  },

  navigateTo(route) {  
      this.$router.push(route); // 使用路由跳转  
    },


    queryInfo(){           //查询功能
        if(this.queryStr.trim().length>0){
        this.tableData=this.tableData.filter(item=>(item.title).match(this.queryStr.trim()))
        }else{
          this.tableData=this.queryData;
         }
      },
    },

    mounted() {
      this.userId = this.$route.params.user_id; // 从路由参数中获取 userId,在 Vue 路由中获取参数
      this.getAllPublishedNotes();   //获取已发布笔记
      this.fetchPublishedNoteCount(); // 获取已发布笔记的总数
    }
}

</script>

<style scoped>
.border {
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: 20px;
}
.note-grid {  
  display: grid;  
  grid-template-columns: repeat(4, 1fr); /* 四列布局 */  
  gap: 40px; /* 卡片之间的间距 */  
}  

.note-card {  
  border: 1px solid #e0e0e0; /* 卡片边框 */  
  border-radius: 8px; /* 圆角 */  
  background-color: #fff; /* 卡片背景色 */  
  display: flex;  
  flex-direction: column; /* 垂直排列元素 */  
  overflow: hidden; /* 防止溢出 */  
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */  
  margin-bottom: 20px; /* 卡片底部外边距 */  
  min-height: 250px; /* 设置最小高度，确保卡片足够高以显示完整图片 */
  align-items: center; /* 水平居中所有子元素 */
  width: 250px ;/* 调整卡片宽度，增加宽度 */ 
  margin-left: 12px
}

.note-image {  
 /* 固定图片高度 */  
 width: 80%; /* 封面图片宽度 */
 height: 170px; /* 自动高度以保持图片比例 */
  display: flex; /* 使用flex布局 */  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
  margin-bottom: 0px; /* 图片与内容之间的间隔 */  
}

.note-content {  
  flex: 1; /* 占用剩余空间 */  
  padding: 10px; /* 内部填充 */  
}

.note-statistics {  
  margin: 20px 0; /* 顶部和底部间距 */  
  font-size: 14px; /* 字体大小 */  
  color: #666; /* 字体颜色 */  
}
.note-timestamp {  
  padding: 10px 20px; /* 发布时间的填充 */  
  background-color: #f5f5f5; /* 背景色 */  
  text-align: right; /* 右对齐 */  
  display: flex; /* 使用flex布局 */  
  justify-content: space-between; /* 两端对齐 */  
  align-items: center; /* 垂直居中 */  
}
.note-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 700px; /* 设置一个最大高度，根据需要调整 */
  overflow-y: auto; /* 启用垂直滚动 */
  padding-right: 20px; /* 为滚动条留出空间，避免内容被遮挡 */
}

/* 如果需要，可以为每个 tab-pane 的内容添加不同的最大高度 */
#first .note-list {
  max-height: 700px;
}
.note-statistics span {
white-space: nowrap; /* 防止文本换行 */
}

.query {  
   display: flex;  
   align-items: center;  
   margin-left: 30px; /* 调整查询框与按钮之间的间距 */  
   justify-content: center; 
 }  
 
 .input-with-button {  
   width:20%;
   margin-right: 35px; /* 与按钮之间的间距 */ 
   align-items: center;  
   justify-content: center; 
 }  

</style>